//生成配置文件
var config = {
  //初始化游戏类型
  type: Phaser.AUTO,
  //场景设置
  scene: {
    preload,
    create,
    update
  },
  scale: {
    mode: Phaser.Scale.FIT,
    width: 750,
    height: 1334,
    parent: 'box'
  }
}
//初始化游戏
var game = new Phaser.Game(config)
var that
var player
var strom
//游戏主要函数

function preload() {
  this.load.image('bg', 'assets/bg.jpg')
  this.load.image('view', 'assets/view.png')
  this.load.image('bear', 'assets/bear.png')
  this.load.image('road1', 'assets/road1.png')
  this.load.image('road2', 'assets/road2.png')
  this.load.image('road3', 'assets/road3.png')
  this.load.image('road4', 'assets/road4.png')
  this.load.image('road5', 'assets/road5.png')
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 96,
    frameHeight: 100
  })
  this.load.spritesheet('strom', 'assets/strom.png', {
    frameWidth: 100,
    frameHeight: 104
  })
}

function create() {
  var background = this.add.group()
  var roadLayer = this.add.group()
  var playerLayer = this.add.group()
  var frontLayer = this.add.group()
  background.create(0, 0, 'bg').setOrigin(0)

  that = this
  initGame(roadLayer, playerLayer, frontLayer)

  $('.tip').show()
  $('.fixbot').show()
  $('.bag').show()
}

function update() {}

var cur_step = 0 //当前所在位置
var cur_heart = 0 //当前投掷机会次数
var cur_coin = 0 //当前金币
var maplist = [
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: -1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  },
  {
    x: 1,
    t: 1
  }
]
var start_x = 385
var start_y = 3100
var isFinish = false

function initGame(roadLayer, playerLayer, frontLayer) {
  //AJAX;
  //maplist = []
  cur_step = 20
  cur_heart = 5
  cur_coin = 20
  $('#coin').html(cur_coin)
  $('#heart').html(cur_heart)
  //isFinish =
  initMap(roadLayer)
  frontLayer.create(0, -10, 'view').setOrigin(0)
  initPlayer(playerLayer)
  //dice()
}
//初始化地图
function initMap(roadLayer) {
  var cur_map_x = start_x
  var cur_map_y = start_y
  maplist.forEach(map => {
    cur_map_x += map.x * 76
    cur_map_y -= 47.4
    roadLayer.create(cur_map_x, cur_map_y, 'road' + randomNum(1, 5))
  })
}

function initPlayer(playerLayer) {
  var totalX = 0
  for (let index = 1; index <= cur_step; index++) {
    totalX += maplist[index].x
  }
  var pX = start_x - 70 + totalX * 76
  var pY = start_y - 95 - cur_step * 47.4
  strom = that.add.sprite(pX, pY, 'strom')
  player = that.add.sprite(pX, pY, 'player')

  strom.visible = false
  that.anims.create({
    key: 'left',
    frames: that.anims.generateFrameNumbers('player', {
      start: 0,
      end: 0
    }),
    frameRate: 10,
    repeat: -1
  })
  that.anims.create({
    key: 'right',
    frames: that.anims.generateFrameNumbers('player', {
      start: 1,
      end: 1
    }),
    frameRate: 10,
    repeat: -1
  })
  that.anims.create({
    key: 'cui',
    frames: that.anims.generateFrameNumbers('strom'),
    frameRate: 4,
    repeat: -1
  })
  that.cameras.main.setBounds(0, 0, 750, 3107)
  that.cameras.main.startFollow(player)
}

function dice() {
  //AJAX
  //if(error){
  //return;
  //}
  var step = randomNum(1, 6)
  var type = 3 //1,2,3,4,5 var
  var param = {
    // 减分
    minus: 4,
    // 奖品
    prize: '腾讯视频vip（1月）',
    question: {
      q: '下列答案中谁是唐代诗人',
      a: '李白',
      b: '苏轼',
      c: '李清照',
      t: 'a',
      g: 10
    },
    // 终点排名
    rank: 133,
    // 加金币
    add: 10,
    // 退步
    back: 3
  }
  cur_heart -= 1
  $('#heart').html(cur_heart)
  $('.popupa').show()
  $('.dice-all').addClass('ani')
  $('.dice-all').css('background-image', 'url(./assets/dice7.png)')
  setTimeout(() => {
    $('.dice-all').removeClass('ani')
    $('.dice-all').css('background-image', 'url(./assets/dice' + step + '.png)')
    setTimeout(() => {
      $('.popupa').fadeOut(() => {
        jump(step, () => {
          showEvent(type, param)
        })
      })
    }, 1000)
  }, 2000)
}

function showEvent(type, param) {
  switch (type) {
    case 1:
      // 减分
      showMinus(param)
      break
    case 2:
      // 获奖
      showPrize(param)
      break
    case 3:
      // 问答
      showQuetion(param)
      break
    case 4:
      // 终点
      showEnd(param)
      break
    case 5:
      // 加分
      showAdd(param)
      break
    case 6:
      // 加分
      showBack(param)
      break
    default:
      break
  }
}
var backStep

function showBack(param) {
  backStep = param.back
  $('#back').html(backStep)
  $('.popup3').show()
}

$('.back-btn').click(function() {
  back(backStep)
})

function showMinus(param) {
  var minus = param.minus
  $('#minus').html(minus)
  cur_coin = cur_coin - minus
  $('#coin').html(cur_coin)
  $('.popup2').show()
}

function showAdd(param) {
  var add = param.add
  $('#add').html(add)
  cur_coin += add
  $('#coin').html(cur_coin)
  $('.popup8').show()
}

function showPrize(param) {
  var prize = param.prize
  $('.ticket').html(prize)
  $('.popup1').show()
}

var qCoin

function showQuetion(param) {
  var question = param.question
  qCoin = question.g
  $('.quetion').html(question.q)
  $('#a').html(question.a)
  $('#b').html(question.b)
  $('#c').html(question.c)
  switch (question.t) {
    case 'a':
      $('#asa').addClass('true')
      break
    case 'b':
      $('#asb').addClass('true')
      break
    case 'c':
      $('#asc').addClass('true')
      break
    default:
      break
  }
  $('.popup4').show()
}

$('.q-wrap').on('click', '.answer', function(e) {
  var $item = $(e.currentTarget)
  var $img = $item.children('img')
  if (isShow === false) {
    if ($item.hasClass('true')) {
      $img.attr('src', './assets/true.png')
      isTrue = true
    } else {
      $img.attr('src', './assets/false.png')
      isTrue = false
    }
    isShow = true
    $img.show()
  }
  if (isTrue == true) {
    $('.tip1').html('回答成功，获得' + qCoin + '金币')
    cur_coin += qCoin
    $('#coin').html(cur_coin)
  } else {
    $('.tip1').html('回答错误')
  }
})

function showEnd(param) {
  var rank = param.rank
  // console.log(rank)
  $('#rank').html(rank)
  $('.popup6').show()
}

function setHeart(num) {
  cur_heart = Math.max(num, 5)
}

function setCoin(num) {
  cur_coin = num
}
//前进
function jump(total, callback = () => {}, step = 0) {
  if (step == total) {
    callback()
  } else {
    cur_step++
    step++
    var thisMap = maplist[cur_step]
    if (thisMap.x == -1) {
      player.play('left')
      console.log('left')
    } else {
      player.play('right')
      console.log('right')
    }
    that.tweens.add({
      targets: [player, strom],
      props: {
        y: {
          duration: 200,
          ease: 'Sine.easeInOut',
          value: '-=47.4'
        },
        x: {
          duration: 200,
          ease: 'Sine.easeInOut',
          value: thisMap.x == -1 ? '-=76' : '+=76'
        },
        angle: {
          duration: 200,
          yoyo: true,
          ease: 'Sine.easeInOut',
          value: thisMap.x == -1 ? '-=5' : '+=5'
        }
      },
      onComplete: function() {
        jump(total, callback, step)
      }
    })
  }
}

//后退
function back(total, callback = () => {}, step = 0) {
  if (step == 0) {
    strom.visible = true
    strom.y = player.y
    strom.x = player.x
    strom.play('cui')
  }
  if (step == total) {
    callback()
    strom.visible = false
  } else {
    step++
    var thisMap = maplist[cur_step]
    if (thisMap.x == -1) {
      player.play('left')
    } else {
      player.play('right')
    }
    that.tweens.add({
      targets: [player],
      props: {
        y: {
          duration: 200,
          ease: 'Sine.easeInOut',
          value: '+=47.4'
        },
        x: {
          duration: 200,
          ease: 'Sine.easeInOut',
          value: thisMap.x == 1 ? '-=76' : '+=76'
        },
        angle: {
          duration: 200,
          yoyo: true,
          ease: 'Sine.easeInOut',
          value: thisMap.x == 1 ? '-=5' : '+=5'
        }
      },
      onComplete: function() {
        cur_step--
        back(total, callback, step)
      }
    })
    if (step > 1) {
      that.tweens.add({
        targets: [strom],
        props: {
          y: {
            duration: 200,
            ease: 'Sine.easeInOut',
            value: '+=47.4'
          },
          x: {
            duration: 200,
            ease: 'Sine.easeInOut',
            value: maplist[cur_step + 1].x == 1 ? '-=76' : '+=76'
          },
          angle: {
            duration: 200,
            yoyo: true,
            ease: 'Sine.easeInOut',
            value: maplist[cur_step + 1].x == 1 ? '-=5' : '+=5'
          }
        }
      })
    }
  }
}
//调试用函数
function randomNum(minNum, maxNum) {
  switch (arguments.length) {
    case 1:
      return parseInt(Math.random() * minNum + 1, 10)

    case 2:
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)

    default:
      return 0
  }
}

var isShow = false,
  isTrue
$('.btn').on('click', function() {
  $('.popup').hide()
  if ($('.answer').hasClass('true')) {
    $('.answer').removeClass('true')
  }
  $('.tip1').html('&nbsp;')
  $('.bool').hide()
  isShow = false
})

$('.gift').click(function() {
  $('.popup5').show()
})
$('.bag').click(function() {
  $('.popup11').show()
})

$('.dice').click(function() {
  dice()
})
